<template>
  <div class="content_box">
    <div class="bing">
      <div id="mainA" />
      <div id="mainB">
          <div>学生总数：{{ pieData.B[0].value }}人</div>
          <div>作弊人数：{{ pieData.B[1].value }}人</div>
        <img height="100%" src="@/assets/404_images/222.png" alt="">
      </div>
      <div id="mainB">
        <el-empty :image-size="100"></el-empty>
      </div>
    </div>
    <VHeader :list-data="interimListData" :option-config="option" @change="search">
      <el-button circle icon="el-icon-refresh-right" @click="getListData" />
    </VHeader>
    <VTable :list-data="listData[pageConfig.Page-1]" :loading="loading" :table-config="tableConfig" />
    <el-pagination
      :current-page.sync="pageConfig.Page"
      :total="pageConfig.total"
      background
      class="Pagination"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="pageSizeChange"
      @current-change="setPage"
    />
  </div>
</template>

<script>
import { getScoreListApi } from '@/api/table'
import { pageSizeChange, tableDataProcess } from '@/utils/diy_funtion'
// 引入echarts库
const echarts = require('echarts')
export default {
  name: 'ScoreInfo',
  data() {
    return {
      testOption: [{ children: [{ value: { value: 0 }}] }],
      test_name: null,
      tableConfig: {
        table_show: {
          student_name: '学生名称',
          class_name: '班级名称',
          test_name: '考试名称',
          single_score: '单选题成绩',
          selection_score: '多选题成绩',
          judge_score: '判断题成绩',
          sum_score: '总分'
        },
        sortable: { key: true, single_score: true, selection_score: true, judge_score: true, sum_score: true },
        selection: false,
        align: 'center',
        operate: false
      },
      option: {
        option_name: ['班级名称', '考试名称', '学生名称'],
        object_name: ['class_name', 'test_name', 'student_name'],
        searchSelect: 0,
        pageSize: 10
      },
      // 饼图数据
      pieData: {
        A: [
          { name: '不及格率', value: 0 },
          { name: '及格率', value: 0 },
          { name: '良好率', value: 0 }
        ],
        B: [
          { name: '学生总数', value: 0 },
          { name: '作弊率', value: 0 }
        ]
      },
      listData: [],
      interimListData: [],
      loading: true,
      searchSelect: 0,
      searchValue: '',
      searchOption: ['班级名称', '考试名称', '学生名称'],
      pageConfig: {
        total: 1,
        Page: 1,
        size: [10, 20, 50, 100],
        pageSize: 10
      }
    }
  },
  computed: {
  },
  watch: {
    pieData: {
      deep: true,
      handler(val, old) {
        const myChartA = echarts.init(document.getElementById('mainA'))
        myChartA.setOption({
          title: {
            text: '成绩分布',
            left: 'center',
            top: 'center'
          },
          series: {
            data: val['A'],
            type: 'pie',
            color: [
              '#E6A23C',
              '#178138',
              '#409EFF'
            ],
            label: {
              orient: 'vertical',
              overflow: 'break',
              fontSize: 10,
              formatter: function(arg) {
                return `${arg.name}：${arg.percent}% \n人数：${arg.value}`
              }
            },
            radius: ['40%', '80%']
          }
        }, true)
      }
    },
    listData: {
      deep: true,
      handler() {
        if (this.option.searchSelect !== 2) this.getPieData()
      }
    }
  },
  created() {
    this.getListData()
  },
  methods: {
    getListData() {
      this.loading = true
      getScoreListApi().then((response) => {
        this.testOption = []
        this.test_name = ''
        response.data.data.forEach(item => {
          const i = this.testOption.find(n => {
            return n.value.value === item.class_name
          })
          if (!i) {
            this.testOption.push({
              value: {
                value: item.class_name,
                type: 'class_name'
              },
              label: item.class_name,
              disabled: false,
              children: []
            })
          }
          this.testOption.forEach(n => {
            const t = n.children.find(d => {
              return d.value.value === item.test_name && n.value.value === item.class_name
            })
            if (!t && item.class_name === n.value.value) {
              n.children.push({
                value: {
                  value: item.test_name,
                  type: 'test_name'
                },
                label: item.test_name,
                disabled: false
              })
            }
          })
        })
        const { newListData, data } = tableDataProcess(
          response.data.data,
          this.pageConfig.pageSize
        )
        setTimeout(() => {
          this.pageConfig.total = data.length
          this.listData = newListData
          this.interimListData = data
          this.loading = false
          this.getPieData()
        }, 500)
      })
    },
    getPieData() {
      let student_number = 0
      let cheating = 0
      const pass = {
        fail: 0,
        pass: 0,
        good: 0
      }
      for (const index in this.listData) {
        for (const i in this.listData[index]) {
          const score_info = this.listData[index][i]
          student_number += 1
          if (score_info.cheating) cheating += 1
          switch (true) {
            case score_info.sum_score < 60 : {
              pass.fail += 1
              break
            }
            case score_info.sum_score >= 60 && score_info.sum_score < 80 : {
              pass.pass += 1
              break
            }
            case score_info.sum_score >= 80 : {
              pass.good += 1
              break
            }
          }
        }
      }
      this.pieData = {
        A: [
          { name: '不及格率', value: pass.fail },
          { name: '及格率', value: pass.pass },
          { name: '良好率', value: pass.good }
        ],
        B: [
          { name: '学生总数', value: student_number },
          { name: '作弊率', value: cheating }
        ]
      }
    },
    pageSizeChange: pageSizeChange,
    setPage(v) {
      this.pageConfig.Page = v
    },
    // 搜索
    search(value) {
      this.loading = true
      setTimeout(() => (this.loading = false), 500)
      this.listData = value.data
      this.pageConfig.total = value.total
      this.option.searchSelect = value.searchSelect
    }
  }
}
</script>

<style scoped>
.bing {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

#mainA, #mainB, #mainC {
  border-radius: 20px;
  background-color: white;
  margin: 0 1%;
  height: 155px;
  width: 60%;
  box-shadow: 0 3px 10px 0 rgb(213, 213, 213);
}

#mainB {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
}
#dd {
  width: 100%;
  height: 100%;
}
#mainB div {
  display: flex;
  align-items: center;
  /*flex-direction: column;*/
  justify-content: space-around;
  font-weight: bold;
  width: 100%;

  height: 100%;
}

#mainB div:nth-child(1) {
  border-right: solid 2px #efefef;
}
</style>
